<template>
  <div
    class="global-search-comp-page"
    :style="{
      'margin-top': top,
      position: isFixed === '1' ? 'absolute' : undefined,
      top: fixedToTop,
      height: height,
      'background-color': isSysOrBgColor ? customBgColor : ''
    }"
  >
    <div
      class="search-container"
    >
      <!--      <div class="top-search">
        <div class="s-input">
          <input
            v-model="searchText"
            class="search-input"
            type="text"
            readonly="readonly"
            :placeholder="placeholder"
            @focus="toLink"
          >
        </div>
        <div class="s-btn" @click="startSearch">
          {{ btnName }}
        </div>
      </div>-->
      <van-search
        v-model="searchText"
        :style="{
          paddingRight,
          paddingLeft,
          paddingTop,
          paddingBottom,
        }"
        shape="round"
        show-action
        placeholder="请输入搜索内容"
      >
        <template #action>
          <div style="color:#fff"> {{ btnName }}</div>
        </template>
      </van-search>
    </div>
  </div>
</template>

<script>

import mixins from './../mixins'

export default {
  name: 'GlovalSearchComp',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: () => {
      }
    },
    varInfo: {
      type: Object,
      default: () => {
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchText: '',
      searchColor: 'blue',
      mainColor: sessionStorage.getItem('THEME_COLOR')
    }
  },
  computed: {
    height() {
      return this.px2rem(this.option.height || 88)
    },
    placeholder() {
      return this.option.placeholder || ''
    },
    isFixed() {
      return this.option.isFixed || ''
    },
    fixedToTop() {
      return this.px2rem(this.option.fixedToTop || 0)
    },
    btnName() {
      return this.option.btnName || '搜索'
    },
    isSysOrBgColor() {
      return this.option.sysOrCustomBgColor
    },
    customBgColor() {
      return this.option.CustomSearchColor
    },
    placeholderColor() {
      // document.documentElement.style.setProperty('--searchColor', this.option.tipsTypefaceColor)
      return this.option.tipsTypefaceColor
    }
  },
  watch: {
    'option.tipsTypefaceColor': {
      handler() {
        // deep: true
        this.changeColor()
      }
    },
    isInitData: {
      immediate: true,
      handler() {
        this.$nextTick(function() {
          // this.changeColor()
        })
      }
    }
  },
  methods: {
    /**
     * 点击搜索按钮事件
     */
    startSearch() {
      this.option.link
        ? this.toLink()
        : this.dispatch_event('filed-value-change', this)
    },
    toLink() {
      if (this.option.link) {
        // this.$router.push({ path: this.option.link })
      }
    },
    getValue() {
      return this.searchText
    },
    changeColor() {
      const Element = document.getElementsByClassName('global-search-comp-page')
      Element[0].style.setProperty('--searchColor', this.option.tipsTypefaceColor)
      if (Element.length > 1) {
        Element[1].style.setProperty('--searchColor', this.option.tipsTypefaceColor)
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';

.global-search-comp-page {
  // --searchColor: blue;
  @include bg-color($mainColor);
  left: 0;
  right: 0;
  z-index: 2;

  .global_search_comp_page_sys {
    @include bg-color($mainColor);
  }

  .search-container {
    /* width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     .top-search {
       width: 100%;
       height: rem(68);
       display: flex;
       align-items: center;
       .s-input {
         width: 0;
         height: 100%;
         flex: 1;
         .search-input {
           width: 100%;
           height: rem(68);
           border-radius: rem(32);
           border: none;
           background-color: #fff;
           opacity: 0.6;
           font-size: rem(28);
           font-family: PingFang SC Regular, PingFang SC Regular-Regular;
           font-weight: 400;
           text-align: left;
           padding: 0 rem(30);
         }
         .search-input::-webkit-input-placeholder {
           opacity: 0.6;
           font-size: rem(28);
           font-family: PingFang SC Regular, PingFang SC Regular-Regular;
           font-weight: 400;
           text-align: left;
           color: var(--searchColor);
         }
       }
       .s-btn {
         flex: 0 0 auto;
         height: 100%;
         margin-left: rem(29);
         width: rem(62);
         font-size: rem(28);
         font-family: PingFang SC Regular, PingFang SC Regular-Regular;
         font-weight: 400;
         text-align: left;
         color: #ffffff;
         display: flex;
         align-items: center;
         justify-content: center;
       }
     }*/
    .van-search {
      background-color: transparent;
    }
  }
}

// .global-search-comp-page-custom {
//   background-color: var(customBgColor);
// }
</style>
